import React, { Children } from "react";
import { ComponentStory, ComponentMeta  } from "@storybook/react";
// export default Button 方式的导出, 会导致识别ts注释失败
import { Button } from "./Button";


export default {
    title: 'Wavexk/Button',
    component: Button,
    // decorators: [(Story) => <div className="container"><Story/></div>],
    argTypes: {
        btnType: {
            type: 'string',
            description: 'the type of this button',
            options: ['primary', 'default' , 'danger' , 'link'],
            control: { type: 'inline-radio' },
        },
        size: {
            type: 'string',
            description: 'the size of this button',
            table: {
                type: {
                    summary: 'string',  
                },
                defaultValue: {
                    summary: 'df'
                },
            },  
            control: {type: 'inline-radio'},
            options: ['sm', 'df', 'lg']
        },
        disabled:{
            type:"boolean",
            description:"Whether the button can be clicked",
            table: {
                defaultValue: {
                    summary: false
                },
            },
            control: { type: 'boolean' },
            options: [true, false]
        },  
        children: {
            type: 'string',
            description: 'the size of this button',
            control: { type: 'text' }, 
        },
        onClick: {
            description:"click event",
            action: 'clicked' 
        }
    },
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = ({...args}) => <Button {...args}> {args.children}</Button>

export const Default: ComponentStory<typeof Button> = Template.bind({})

Default.args = {
    btnType:"default",
    size:"df",
    children: "Default",
    disabled: false,
}

export const Primary: ComponentStory<typeof Button> = Template.bind({})

Primary.args = {
    btnType: "primary",
    size: "df",
    children: "Primary",
    disabled: false,
}


export const Danger: ComponentStory<typeof Button> = Template.bind({})

Danger.args = {
    btnType: "danger",
    size: "df",
    children: "Danger",
    disabled: false,
}


export const Link = Template.bind({});

Link.args = {
    btnType: "link",
    size: "df",
    disabled: false,
    children: "Link",
    href:"http://www.baidu.com"
}
